<!-- 忘记密码 -->
<template>
    <div class="forget-password-contain">
        <Header></Header>
        <div class="nav-logo">
            <img src="@/assets/logo/logo-login.png" class="inline-block mr10">
            <span class="titils inline-block ml20 pl20 border-l fs24 black">
				找回密码
			</span>
        </div>
        <div class="content-contain mt40 mb40">
            <div class="container pb30 white-bg flex-column-center">
                <div class="steps-contain">
                    <el-steps :space="500" :active="active" finish-status="success">
                        <el-step title="验证账号信息"></el-step>
<!--                        <el-step title="设置新密码"></el-step>-->
                        <el-step title="修改成功"></el-step>
                    </el-steps>
                </div>
                <!-- 第1步 -->
                <div v-if="active === 1">
                    <ul class="form-contain">
                        <li class="mb20">
                            <el-select v-model="getMethod" @change="initError" placeholder="请选择" class="form-item">
                                <el-option key="0" value="code" label="通过绑定的手机找回密码"></el-option>
                                <el-option key="1" value="email" label="通过绑定的邮箱找回密码"></el-option>
                            </el-select>
                        </li>
                        <li v-show="getMethod === 'code'">
                            <el-input v-model="params.phone" placeholder="请输入手机号码" maxlength="11"
                                      class="form-item"></el-input>
                            <p class="red error-text">
								<span v-show="errorObj.phone">
									* 请输入正确的手机号码
								</span>
                            </p>
                        </li>
                        <li v-show="getMethod === 'code'" class="mb10 code-contain">
                            <el-input v-model="params.code" placeholder="请输入验证码" maxlength="8"
                                      class="form-item"></el-input>
                            <p class="red error-text">
								<span v-show="errorObj.code">
									* 请输入验证码
								</span>
                            </p>
                            <div class="code-btn pointer text-c green" @click="sendCode()">
                                获取验证码
                            </div>
                        </li>
                        <li v-show="getMethod === 'code'" class="mb20 tips-text">
                            系统将发送验证码短信到您的手机上，请注意查收
                        </li>
                        <li v-show="getMethod === 'code'" class="mb20">
                            <el-input v-model="params.password" placeholder="请输入新密码" type="password" class="form-item"></el-input>
                        </li>
                        <li v-show="getMethod === 'email'" class="mb20">
                            <el-input v-model="email" placeholder="请输入邮箱地址" maxlength="11" class="form-item"></el-input>
                            <p class="red error-text">
								<span v-show="errorObj.email">
									* 请输入邮箱地址
								</span>
                            </p>
                        </li>
                        <li v-show="getMethod === 'email'" class="mb20 pb30 tips-text">
                            系统将发出一封验证邮件到您的注册（或绑定的）邮箱，<br>
                            通过验证邮件就可以重新设置密码了
                        </li>
                    </ul>
                    <p @click="toSecondStep" class="nex-btns pointer white green-bg pt15 pb15 text-c">
                        下一步
                    </p>
                </div>
                <!-- 第2步 -->
                <div v-if="active === 2 && getMethod === 'code'">
                    <ul class="form-contain">
                        <li class="mb20">
                            <el-input class="form-item"
                                    type="password"
                                    v-model="secondParams.pw"
                                    placeholder="请输入原密码"
                            >
                            </el-input>
                        </li>
                        <li class="mb20">
                            <el-input class="form-item"
                                    type="password"
                                    v-model="secondParams.pwCofirm"
                                    placeholder="请确认新密码"
                            >
                            </el-input>
                            <p class="red error-text">
								<span v-show="errorObj.confirm">
									* 两次密码不一致，请重新确认
								</span>
                            </p>
                        </li>
                    </ul>
                    <p @click="toThirdStep" class="nex-btns pointer white green-bg pt15 pb15 text-c">
                        确定
                    </p>
                </div>
                <div v-if="active === 2 && getMethod === 'email'">
                    <h2 class="form-contain green text-c">
                        <i class="el-icon-circle-check green fs75"></i>
                        <p class="mt20">
                            验证邮件已发送到您的注册（或绑定的）邮箱，<br><br>
                            请通过验证邮件重新设置密码
                        </p>
                    </h2>
                </div>
                <!-- 第3步 -->
                <div v-if="active === 3">
                    <div class="form-contain text-c">
                        <img src="@/assets/image/enterprise/pw-success.png">
                        <h2 class="mt20 mb30 c777">
                            恭喜你，密码已成功修改
                        </h2>
                        <!--   <router-link to="/login" class="green-bg white pl30 pr30 pt10 pb10 mr20 radius">
                               去登录
                           </router-link>-->
                        <router-link to="/enterprise/account/safe" class="pl25 pr25 pt10 pb10 mr20 radius border">
                            返回
                        </router-link>
                    </div>
                </div>

                <!-- <div class="pt40 mt30 text-c">
                     已有账号，去
                     <router-link to="/login" class="green bold">登录</router-link>
                 </div>-->
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import {changePw} from '@/api/enterprise'
import {getAccountById} from "@/api/enterprise";
import {checkCode, sendValidCode} from "@/api/register";
import {checkResponse} from "@/utils";
import {resetPwd, resetPwdPlus} from "@/api/me/account";

export default {
    name: 'ForgetPassword',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            getMethod: 'code',
            params: {
                phone: '',
                code: '',
                password: ''
            },
            secondParams: {
                pw: '',
                pwCofirm: '',
            },
            email: '',
            active: 1,
            errorObj: {
                phone: false,
                code: false,
                email: false,
                confirm: false
            }
        }
    },
    created() {
        // this.getAccountInfoById();
    },
    methods: {
        getAccountInfoById() {
            getAccountById().then(res => {
                this.params.phone = res.datas.phone
                this.email = res.datas.email
            });
        },
        sendCode(type = 1) {
            sendValidCode({
                type: type,
                scene: 'forget',
                areaCode: '086',
                phone: this.params.phone,
            }).then(res => {
                if (checkResponse(res)) {
                    this.$message.success('获取验证码成功');
                }
            });
        },
        toSecondStep() {
            // 手机号验证
            if (this.getMethod === 'code') {
                this.params.code === '' ? this.errorObj.code = true : this.errorObj.code = false
                if (this.params.phone === '') {
                    this.errorObj.phone = true
                } else {
                    this.params.phone.length === 11 ? this.errorObj.phone = false : this.errorObj.phone = true
                }

                if (this.errorObj.phone || this.errorObj.code) {
                    return false
                }
            } else {
                if (this.email === '') {
                    this.errorObj.email = true
                    return false
                }
                this.errorObj.email = false
            }
            resetPwdPlus({
                validCode: this.params.code,
                phone: this.params.phone,
                password: this.params.password,
                email: this.email,
                type: 0,
            }).then(res => {
                if (checkResponse(res)) {
                    this.active++
                } else {
                    this.$message.error('验证码不正确');
                }
            });

            /*
                        checkCode({
                            code: this.params.code,
                            phone: this.params.phone,
                            email: this.email,
                            type: this.getMethod === 'code' ? 1 : 2,
                        }).then(res => {
                            if (checkResponse(res)) {
                                this.active++
                            } else {
                                this.$message.error('验证码不正确');
                            }
                        })*/
        },
        // 第二步，下一步
        toThirdStep() {
            this.errorObj.confirm = false
            let params = {
                newPassword: this.secondParams.pw,
                oldPassword: this.secondParams.pwCofirm
            }
            changePw(params).then(res => {
                if (checkResponse(res, true)) {
                    this.active++
                }
            })
        },
        initError() {
            this.errorObj.phone = this.errorObj.code = this.errorObj.email = false
        }
    }
}
</script>

<style lang="scss">
@import url('../../assets/styles/enterprise/common.css');

.forget-password-contain {
    .border {
        border: 1px solid #3DABC4;
        color: #3DABC4;
    }

    .c777 {
        color: #777;
    }

    .green {
        color: #5EA08E;
    }

    .fs75 {
        font-size: 75px;
    }

    .steps-contain {
        width: 500px;
        margin-left: 145px;
    }

    .form-contain {
        margin-top: 75px;
        height: 325px;

        .form-item {
            width: 340px;
        }
    }

    .tips-text {
        color: #9F9F9F;
    }

    .el-step__head.is-success {
        color: #5EA08E;
        border-color: #5EA08E;

        .el-step__icon {
            background: #5EA08E;
        }

        .el-step__icon-inner {
            color: #fff;
        }
    }

    .el-step__title.is-success {
        color: #5EA08E;
    }

    .el-step__head.is-process {
        color: #fff;
        border-color: #9A9A9A;
    }

    .el-step__title.is-process {
        color: #9A9A9A;
        font-weight: 400;
    }

    .el-step__head.is-wait {
        color: #fff;
        border-color: #9A9A9A;
    }

    .el-step__title.is-wait {
        color: #9A9A9A;
    }

    .el-step__icon {
        background: #9A9A9A;
    }

    .el-step__main {
        position: relative;
        left: -23px;
    }

    .code-contain {
        position: relative;

        .code-btn {
            width: 100px;
            height: 48px;
            line-height: 48px;
            position: absolute;
            top: 0;
            right: 0;
        }
    }


    .el-input--medium .el-input__inner {
        height: 48px;
        line-height: 48px;
    }

    .nav {
        background: #f5f5f5;

        .nav-left {
            display: none;
        }
    }

    .nav_conter {
        display: none !important;
    }

    .nav-logo {
        width: 1200px;
        margin: 0 auto;
        padding-top: 50px;
    }

    .content-contain {
        min-height: calc(100vh - 355px)
    }

    .container {
        width: 780px;
        height: 630px;
        margin: 0 auto;
        padding-top: 65px;
        padding-left: 150px;
        padding-right: 150px;
        box-shadow: 10px 10px 15px #ECECEC;

        .auxiliary-text {
            color: #999999;
            vertical-align: bottom;
        }

        .nex-btns {
            width: 340px;
            margin: 0 auto;
        }

        .error-text {
            height: 20px;
        }
    }
}

</style>
